<template>
  <div class="home">
    <div class="top">
      <p>设备台账</p>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>资产管理</el-breadcrumb-item>
        <el-breadcrumb-item>设备管理</el-breadcrumb-item>
        <el-breadcrumb-item>设备台账</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="header">
      <!-- 搜索 -->
      <el-input
        clearable
        style="width: 150px"
        v-model="equipmentCoding"
        placeholder="设备编码"
      ></el-input>
      <el-input
        clearable
        style="width: 150px"
        v-model="deviceName"
        placeholder="设备名称"
      ></el-input>
      <el-select clearable style="width: 150px" v-model="equipmentType" placeholder="设备类型">
        <!-- <el-option label="人脸识别机" value="人脸识别机"></el-option>
        <el-option label="指纹识别器" value="指纹识别器"></el-option>
        <el-option label="门卡" value="门卡"></el-option> -->
        <el-option v-for="item in equipmentTypeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select clearable style="width: 160px" v-model="installationSite" placeholder="安装位置">
        <el-option v-for="item in installationSiteOptions"
          :key="item.value1"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker clearable v-model="startTime" align="right" type="date" placeholder="开始日期">
      </el-date-picker>
      <el-date-picker clearable v-model="endTime" align="right" type="date" placeholder="结束日期">
      </el-date-picker>
      <el-button
        @click="onSearch"
        style="background-color: #0bb197;border:1px solid #0bb197"
        type="success"
        icon="el-icon-search"
        >查询</el-button
      >
      <el-button class="reset" icon="el-icon-refresh" @click="onReset"
        >重置</el-button
      >
    </div>

    <!-- 数据 -->
    <div class="body">
      <div class="div">
        <h4>查询结果列表</h4>
        <el-button
          style="background-color: #0bb197;border:1px solid #0bb197"
          type="primary"
          @click="addDialog = true"
          >新增</el-button>
      </div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column
          align="center"
          prop="id"
          label="序号"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="equipmentCoding"
          label="设备编码"
          width="130"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="deviceName"
          label="设备名称"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="ofSys"
          label="所属系统"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="equipmentType"
          label="设备类型"
          width="130"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="manufacturers"
          label="厂家"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="manufacturersCoding"
          label="厂家编码"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="installationSite"
          label="安装位置"
          width="150"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="startDate"
          label="使用日期"
          width="150"
        >
          <template slot-scope="scope"
            ><span>{{ timeTrans(scope.row.startDate, 1) }}</span></template
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="operation"
          label="操作"
          width="200"
        >
          <template slot-scope="scope">
            <el-button style="color: #0bb197" type="text" size="small"
             @click="openEdit(scope.row)" >编辑</el-button
            >
            <el-button
              style="color: #0bb197"
              type="text"
              @click="del(scope.row.id)"
              size="small"
              >删除</el-button
            >
            <el-button style="color: #0bb197" type="text" size="small"
              @click="query(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="count"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :background="true"
        class="msg-pagination-container"
      >
      </el-pagination>
      <!-- 新增数据 -->
      <el-dialog title="新增设备" :visible.sync="addDialog">
        <el-form :model="addData">
          <div class="addB">
            <el-form-item label="设备编码" >
              <el-input
                v-model="addData.equipmentCoding"
                autocomplete="off"
              ></el-input>
            </el-form-item>
             <el-form-item label="设备名称" >
              <el-input
                  v-model="addData.deviceName"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="所属系统" >
              <el-input v-model="addData.ofSys" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="厂家名称" >
                <el-input
                  v-model="addData.manufacturers"
                  autocomplete="off"
                ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
              <el-form-item label="厂家编码" >
                <el-input
                  v-model="addData.manufacturersCoding"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="安装位置" >
                <el-input
                  v-model="addData.installationSite"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="设备品牌" >
              <el-input
                v-model="addData.equipmentBrand"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="设备型号" >
              <el-input
                v-model="addData.equipmentModel"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">            
            <el-form-item label="购入日期" >
              <el-date-picker style="width:350px" v-model="addData.purchaseDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="使用日期" >
              <el-date-picker style="width:350px" v-model="addData.startDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="负责部门" >
              <el-input
                v-model="addData.equipmentDep"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="负责人员" >
              <el-input
                v-model="addData.equipmentPrincipal"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
          <el-form-item label="设备价值（元）">
            <el-input
              v-model="addData.equipmentValue"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-input
              v-model="addData.equipmentType"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="button" @click="addDialog = false">取 消</el-button>
          <el-button type="primary" @click="add" style="background-color:#0bb197;border:1px solid #0bb197;">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改数据 -->
      <el-dialog title="编辑设备" :visible.sync="editDialog">
        <el-form :model="editData">
          <div class="addB">
            <el-form-item label="序号" >
              <el-input
                v-model="editData.id"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="设备编码" >
              <el-input
                v-model="editData.equipmentCoding"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
             <el-form-item label="设备名称" >
              <el-input
                  v-model="editData.deviceName"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="所属系统" >
              <el-input v-model="editData.ofSys" autocomplete="off"></el-input>
            </el-form-item>
          </div>
          <div class="addB">
              <el-form-item label="厂家名称" >
                <el-input
                  v-model="editData.manufacturers"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="厂家编码" >
                <el-input
                  v-model="editData.manufacturersCoding"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="安装位置" >
              <el-input
                v-model="editData.installationSite"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="设备品牌" >
              <el-input
                v-model="editData.equipmentBrand"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="设备型号" >
              <el-input
                v-model="editData.equipmentModel"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="购入日期" >
              <el-date-picker style="width:350px" v-model="editData.purchaseDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="使用日期" >
              <el-date-picker style="width:350px" v-model="editData.startDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="负责部门" >
              <el-input
                v-model="editData.equipmentDep"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="负责人员" >
            <el-input
              v-model="editData.equipmentPrincipal"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备价值（元）" >
            <el-input
              v-model="editData.equipmentValue"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          </div>
          <div class="addB">
            <el-form-item label="设备类型" style="width:85%">
                <el-input
                  v-model="editData.equipmentType"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="button" @click="editDialog = false">取 消</el-button>
          <el-button type="primary" @click="edit" style="background-color:#0bb197;border:1px solid #0bb197;">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 详情信息弹窗 -->
      <el-dialog title="详情信息" :data="queryData" :visible.sync="queryDialog" style="color:0bb197">
        <div class="queryDetails">
          <p>设备编码：{{row.equipmentCoding}}</p>
          <p>设备名称：{{row.deviceName}}</p>
        </div>
        <div class="queryDetails">
          <p>所属系统：{{row.ofSys}}</p>
          <p>设备类型：{{row.equipmentType}}</p>
        </div>
        <div class="queryDetails">
          <p>厂家名称：{{row.manufacturers}}</p>
          <p>厂家编码：{{row.manufacturersCoding}}</p>
        </div>
        <div class="queryDetails">
          <p>安装位置：{{row.installationSite}}</p>
          <p>设备品牌：{{row.equipmentBrand}}</p>
        </div>
        <div class="queryDetails">
          <p>设备型号：{{row.equipmentModel}}</p>
          <p>购入日期：{{queryData.purchaseDate}}</p>
        </div>
        <div class="queryDetails">
          <p>使用日期：{{queryData.startDate}}</p>
          <p>负责部门：{{row.equipmentDep}}</p>
        </div>
        <div class="queryDetails">
          <p>负责人员：{{row.equipmentPrincipal}}</p>
          <p>设备价值：{{row.equipmentValue}}</p>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
//时间戳
import time from "../utils/time"

export default {
  mixins:[time],
  data: function () {
    return {
      equipmentCoding: "",
      deviceName: "",
      equipmentType: "",
      installationSite: "",
      startTime: "",
      endTime:"",
      addDialog: false,
      editDialog:false,
      tableData: [],
      total: 1,
      count: 10,
      page: 1,
      addData: {
        id:'',
        equipmentCoding: "",
        deviceName: "",
        ofSys: "",
        manufacturers: "",
        equipmentType:'',
        manufacturersCoding: "",
        installationSite: "",
        equipmentBrand: "",
        equipmentModel: "",
        purchaseDate: "",
        startDate: "",
        equipmentDep: "",
        equipmentPrincipal: "",
        equipmentValue: "",
      },
      editData:{},
      row:'',
      queryDialog:false,
      queryData:{},
      //设备类型
      equipmentTypeOptions:[],
      equipmentTypeValue:'',
      //安装位置
      installationSiteOptions:[],
      installationSiteValue:''
    };
  },
  methods: {
    //分页
    handleSizeChange(val){
      this.count = val;
      this.getData();
    },
    handleCurrentChange(val){
      this.page = val;
      this.getData();
    },
    //渲染数据
    getData: function () {
      this.$axios({
        url: "/smart/equipment/list",
        method: "get",
        params: {
          pageNum: this.page,
          pageSize: this.count,
          equipmentCoding:this.equipmentCoding,
          equipmentType:this.equipmentType,
          deviceName:this.deviceName,
          installationSite:this.installationSite,
          startTime:this.startTime,
          endTime:this.endTime
        }
      }).then(({ data }) => {
        if (data.code == 2000) {
          console.log(data.data);
          this.tableData = data.data.list;
          this.total = data.data.total;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    //封装设备类型和安装位置
    getSearch:function(){
      this.$axios({
        url: "/smart/equipment/list",
        method: "get",
        params: {
          pageNum:1,
          pageSize:10000,
        }
      }).then(({ data }) => {
        if (data.code == 2000) {
          console.log(data.data);
          this.tableData = data.data.list;
          data.data.list.forEach((v)=>{
            let item = {
              value:v.equipmentType,
              label:v.equipmentType,
            };
            let etc = {
              value:v.installationSite,
              label:v.installationSite,
            }
            this.equipmentTypeOptions.push(item);
            this.installationSiteOptions.push(etc)
          })
          this.total = data.data.total;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    //查询
    onSearch: function () {
      console.log(111);
      this.getData();
    },
    //重置
    onReset: function () {
          this.equipmentCoding="",
          this.equipmentType="",
          this.deviceName="",
          this.installationSite="",
          this.startTime="",
          this.endTime=""
          this.getData();
    },
    //新增
    add: function () {
      this.$axios({
        url: "/smart/equipment/add",
        method: "post",
        data: this.addData,
      }).then(({ data }) => {
        if ((data.code = 2000)) {
          console.log(data);
          this.$message.success("添加成功");
          this.addDialog = false;
          this.getData();
        } else {
          console.log(data);
          this.$message.error("添加失败");
        }
      });
    },
    //删除
    del: function (row) {
      this.$confirm('确认删除此条信息', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          confirmButtonClass:"buttonzz"
        }).then(()=>{
          this.$axios({
          url: "/smart/equipment/del/"+row,
          method: "DELETE",
        }).then(({ data }) => {
          console.log(data);
          if ((data.code = 2000)) {
            this.$message.success("删除成功");
            this.getData();
          } else {
            this.$message.error("删除失败");
          }
        });
        }).catch(action => {
            this.$message({
              type: 'error',
              message: action === 'cancel'
                ? '放弃删除'
                : '停留在当前页面'
            })
          });
    },
    //编辑
    openEdit:function(row){
      //编辑框显示出来
      this.editDialog=true;
      //赋值
      let editData={ ...row };
      this.editData=editData;
      console.log(this.editData);
    },
    edit:function(){
      this.$axios({
        url:"/smart/equipment/edit",
        method:"put",
        data:this.editData
      }).then(({data})=>{
        if(data.code==2000){
          console.log(data);
          this.$message.success('修改成功');
          this.editDialog = false;
          this.getData();
        }else{
          this.$message.error("修改失败")
        }
      })
    },
    //详情
    query:function(row){
      this.row = row;
      this.queryDialog = true;
      this.$axios({
        url:"/smart/equipment/queryById/" + row.id
      }).then(({data})=>{
        if(data.code == '2000'){
          this.queryData = data.data;
          this.queryData.purchaseDate = this.timeTrans(this.queryData.purchaseDate);
          this.queryData.startDate = this.timeTrans(this.queryData.startDate);
        }else{
          this.$message.error(data.msg)
        }
      })
    }
  },
  mounted: function () {
    this.getData();
    this.getSearch();
  },
};
</script>
<style scoped>
.home {
  height: 95%;
}
.top {
  display: flex;
  justify-content: space-between;
  margin: 20px 20px 10px 25px;
}
.header {
  height: 60px;
  background: white;
  margin: 10px 20px 20px;
  padding-top: 18px;
  padding-left: 15px;
  border-radius: 8px;
}
.reset {
  color: rgb(197, 196, 196);
}
.reset:hover {
  color: #0bb197;
}
.el-input,
.el-select {
  margin-right: 10px;
}
.el-button {
  margin-left: 10px;
}
.body {
  background: white;
  margin: 10px 20px;
  height: 84%;
  border-radius: 8px;
}
.el-pagination {
  margin: 25px 10px 0 0;
  display: flex;
  justify-content: right;
}
.div {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.el-form-item{
  width: 350px;
}
.addB{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
.dialog-footer{
  display: flex;
  justify-content: center;
}
.button:hover{
  color: #0bb197;
  border: 1px solid #0bb197;
}
</style>

<style>
.el-dialog__header,
.msg-pagination-container.is-background .el-pager li:not(.disabled).active {
  /*当前选中页数的样式进行修改*/
  background-color: #0bb197;
  color: #fff;
}
.el-dialog__title,
.el-dialog__headerbtn .el-dialog__close{
  color: white;
}
.queryDetails{
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 15px;
}
.queryDetails p{
  width: 50%;
}
.el-button--primary{
  background-color: #0bb197;
  border-color:#0bb197;
}
.el-button--primary:hover{
  background-color: #0bb197;
  border-color:#0bb197;
}
.buttonzz{
  color: #FFF;
    background-color:#0bb197 !important;
    border-color: #0bb197 !important;
}
</style>
